<template>
  <el-card style="max-width: 98%; margin: 10px">
    <el-col :span="12">
      <el-form ref="queryParamRef" label-width="60px">
        <el-form-item
          label="名称:"
          prop="name"
          style="display: flex; align-items: center"
        >
          <el-input
            size="default"
            style="width: 300px"
            v-model="queryParam.param.name"
            placeholder="名称"
          ></el-input>
          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="getListData"
          >
            查询
          </el-button>
          <el-button style="margin-left: 20px" @click="cleanQuery">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- 分割线-->
    <el-divider />
    <!--    新增编辑框-->
    <add-or-update
      ref="addOrUpdateRef"
      @refreshDataList="getListData"
    ></add-or-update>
    <el-table :data="tableData" border style="width: 100%" stripe>
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="type" label="类型" align="center" />
      <el-table-column prop="url" label="链接" align="center" />
      <el-table-column prop="userName" label="用户名" align="center" />
      <el-table-column prop="password" label="密码" align="center" />
      <el-table-column prop="loadStatus" label="数据源加载状态" align="center" />
      <el-table-column
        label="操作"
        fixed="right"
        header-align="center"
        width="150"
        align="center"
      >
        <template #default="scope">
          <el-button
            type="primary"
            link
            @click="addOrUpdateHandle(scope.row.id)"
          >
            修改
          </el-button>
          <el-popconfirm
            title="确定要删除吗？"
            @confirm="() => deleteHandle(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script lang="ts" setup>
//引入新增与编辑组件
import AddOrUpdate from "./add-or-update.vue"
import { reactive, ref } from "vue"
import { getList, deleteOne } from "@/api/pub/middleware"
import { ElMessage } from "element-plus"
//列表数据
const tableData = ref()
//定义一个对象用来接受查询条件的数据，在getListData方法中带上查询条件
const queryParamRef = ref()
const queryParam = reactive({
  param: {
    name: "",
    type: "",
    url: "",
    userName: "",
    password: "",
    loadStatus: "",
  },
})
//定义新增与编辑的数据模型
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id)
}
//获取列表数据请求方法
const getListData = async () => {
  const res = await getList(queryParam.param) // 直接使用字符串参数
  tableData.value = res.data
}

// 在组件挂载完成后调用getListData
getListData()

// 删除单条数据请求
const deleteHandle = async (id: number) => {
  deleteOne(id)
    .then(() => {
      ElMessage.success({
        message: "操作成功",
        duration: 500,
        onClose: () => {
          getListData()
        },
      })
    })
    .catch((error) => {
      console.error("添加数据失败", error)
      ElMessage.error("操作失败，请检查网络或数据是否正确")
    })
}

//清除查询条件表单
const cleanQuery = () => {
  if (queryParamRef.value) {
    queryParamRef.value.resetFields()
    //清除queryParam所有数据
    Object.keys(queryParam.param).forEach((key) => {
      queryParam.param[key] = ""
    })
    getListData()
  }
}
</script>
